<template>
  <div id="detial">
    <!-- <div class="detail_shopping">
            商品详情页
        </div>
        <div @click="goshoppingcar">加入购物车</div>
        <div @click="gopaynow">立即购买</div> -->
    <div id="top">
      <span class="iconfont arrow_l" @click="goback">&#xe6bc;</span>
      <h2>{{goodsdetail.goodsname}}</h2>
      <p>
        <span class="iconfont">&#xf0112;</span>
        <span class="iconfont">&#xe71e;</span>
        <i class="line"></i>
      </p>
    </div>

    <nav>
      <a href="#" class="cur"
        >商品
        <i></i>
      </a>
      <a href="#">评价</a>
      <a href="#">详情</a>
      <a href="#">推荐</a>
    </nav>

    <main>
      <div id="banner">
        <img :src="$pre+goodsdetail.img" alt="" />
        <span class="iconfont icon-zhuanfa_4"></span>
        <span class="page">8/8</span>
      </div>
      <div id="introduce">
        <p>
          <span>
            <i>￥</i>
            <em>{{goodsdetail.price}}</em>
            <del>￥{{goodsdetail.market_price}}</del>
          </span>
          <span class="iconfont">&#xe60f;<b>收藏</b></span>
        </p>
        <p>{{goodsdetail.specsattr}}</p>
        <p>华为产品，七天无条件退款，一年保修</p>
        <p>11.11限时299元起</p>
        <p>
          <span> 此商品于2021_11_11,00结束闪购特卖，平台美…</span>
          <span class="iconfont">查看&#xe601;</span>
        </p>
      </div>
      <div id="discount">
        <p>
          <span>领劵</span>
          <span>分期</span>
        </p>
        <p>
          <span>
            <i>￥300</i>
            <i>￥50</i>
            <i>￥10</i>
          </span>
          <span class="iconfont">
            <em>可选3/6/12期</em>
            &#xe601;
          </span>
        </p>
      </div>
    </main>

    <footer>
      <div class="left">
        <span class="iconfont">&#xe62d;<i>客服</i></span>
        <span class="iconfont">&#xe663;<i>店铺</i></span>
        <span class="iconfont">&#xe612;<i>购物车</i></span>
      </div>
      <div class="right">
        <span @click="gocart">加入购物车</span>
        <span >立即购买</span>
      </div>
      <b></b>
    </footer>
  </div>
</template>

<script>
import {cartadd} from '../utils/api'
import {mapActions,mapGetters} from 'vuex'
export default {
  data(){
    return{
      list:[],
      userinfo:{}
    }
  },
  computed:{
    ...mapGetters({
      goodsdetail:"goodsdetail/list"
    })
  },
  methods: {
    ...mapActions({
       reqGoodsDetail:"goodsdetail/reqGoodsDetail"
    }),
    gocart(){
      cartadd({uid:this.userinfo.uid,goodsid:this.goodsdetail.id,num:1,}).then(res=>{
        if(res.data.code==200){
          this.$router.push("/indexpage/shoppingcar");
        }else{
          alert(res.data.msg)
        }
      })
    },
    // goshoppingcar() {
    //   this.$router.push("/indexpage/shoppingcar");
    // },
  },
  mounted(){
    this.reqGoodsDetail(this.$route.query)
    this.userinfo=sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{}
  }
};
</script>

<style scoped>
#top {
  height: 0.64rem;
  padding: 0.28rem 0.1rem 0.28rem 0.33rem;
  background-color: #ff6040;
  display: flex;
  color: #ffdfd8;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
#top .arrow_l {
  font-size: 0.34rem;
}
#top h2 {
  font-size: 0.32rem;
  margin-left: 1.4rem;
}
#top p {
  height: 0.64rem;
  width: 1.75rem;
  display: flex;
  border: 1px solid #ff8a6f;
  box-sizing: border-box;
  border-radius: 0.64rem;
  align-items: center;
  position: relative;
}
#top p span {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 0.64rem;
}
#top p .line {
  width: 1px;
  height: 0.38rem;
  position: absolute;
  left: 0.87rem;
  top: 0.13rem;
  background-color: #fff;
}
nav {
  display: flex;
  height: 0.45rem;
  width: 100%;
  justify-content: space-between;
  background: linear-gradient(#ff6040, #ff887d);
  padding: 0 0.73rem 0 0.67rem;
  box-sizing:border-box ;
  position: fixed;
  left: 0;
  top: 1.2rem;
  z-index: 1;
}
nav a {
  color: #fff3f2;
  font-size: 0.26rem;
}
nav a.cur {
  font-size: 0.3rem;
  margin-top: -0.05rem;
  font-weight: bold;
  position: relative;
}
nav a.cur i {
  height: 0.04rem;
  position: absolute;
  width: 0.4rem;
  background-color: #fff;
  bottom: 0;
  left: 0.12rem;
  border-radius: 0.01rem;
}
main {
  background-color: #f2f2f2;
  padding: 1.65rem 0 1.67rem 0;
  box-sizing: border-box;
}
main #banner {
  height: 7.5rem;
  position: relative;
}
main #banner img {
  height: 7.5rem;
  width: 7.5rem;
}
main #banner .iconfont {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  position: absolute;
  text-align: center;
  line-height: 0.48rem;
  color: #fff;
  background-color: #585355;
  right: 0.25rem;
  top: 0.2rem;
}
main #banner .page {
  width: 0.8rem;
  background-color: #585355;
  border-radius: 0.36rem;
  font-size: 0.22rem;
  position: absolute;
  text-align: center;
  line-height: 0.36rem;
  right: 0.2rem;
  bottom: 0.2rem;
  color: #fff;
}
main #introduce {
  background-color: #fff;
  height: 2.9rem;
  padding: 0.2rem 0.2rem 0.15rem 0.2rem;
  box-sizing: border-box;
}
main #introduce p:nth-child(1) {
  display: flex;
  justify-content: space-between;
}
main #introduce p:nth-child(1) span:nth-child(1) {
  color: #999999;
  font-weight: bold;
}
main #introduce p:nth-child(1) span:nth-child(1) i {
  color: #ff6040;
}
main #introduce p:nth-child(1) span:nth-child(1) em {
  color: #ff6040;
  font-size: 0.44rem;
}
main #introduce p:nth-child(1) .iconfont {
  color: #ff6040;
  font-size: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main #introduce p:nth-child(2) {
  color: #333;
  font-size: 0.3rem;
  margin-top: 0.05rem;
}
main #introduce p:nth-child(3) {
  font-size: 0.26rem;
  color: #999999;
  margin-top: 0.05rem;
}
main #introduce p:nth-child(4) {
  height: 0.33rem;
  width: 1.66rem;
  background-color: #ff8066;
  border: 1px solid #ffa997;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  line-height: 0.31rem;
  margin-top: 0.2rem;
}
main #introduce p:nth-child(5) {
  margin-top: 0.2rem;
  height: 0.4rem;
  width: 7.1rem;
  padding-left: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f2f2f2;
}
main #introduce p:nth-child(5) span {
  font-size: 0.2rem;
  color: #9a9a9a;
}
main #introduce p:nth-child(5) span.iconfont {
  color: #ff6040;
}
main #discount {
  height: 1.58rem;
  display: flex;
  padding-top: 0.4rem;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 0.2rem;
}
main #discount p:nth-child(1) {
  height: 1.18rem;
  width: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
main #discount p:nth-child(1) span {
  font-size: 0.22rem;
  font-weight: bold;
}
main #discount p:nth-child(2) {
  height: 1.18rem;
  display: flex;
  flex-direction: column;
  width: 6.4rem;
}
main #discount p:nth-child(2) span {
  width: 100%;
}
main #discount p:nth-child(2) span:nth-child(1) {
  height: 0.5rem;
  border-bottom: 2px solid #e6e6e6;
  box-sizing: border-box;
}
main #discount p:nth-child(2) span:nth-child(1) i {
  background-color: #ffcc66;
  padding: 0 0.05rem;
  color: #743d1b;
  margin-right: 0.15rem;
}
main #discount p:nth-child(2) span:nth-child(2) {
  height: 0.68rem;
  font-size: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #666666;
}
footer {
  height: 1.67rem;
  background-color: #fff;
  border-top: 1px solid #cecece;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}
footer .left {
  height: 1rem;
  width: 3.1rem;
  padding: 0.13rem 0.4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
footer .left .iconfont {
  font-size: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold ;
}
footer .left .iconfont i {
  font-weight: lighter;
}
footer .right {
  height: 1rem;
  width: 4.4rem;
  display: flex;
}
footer .right span {
  width: 50%;
  height: 1rem;
  font-weight: bold;
  font-size: 0.3rem;
}
footer .right span:nth-child(1) {
  background-color: #ffcc66;
  color: #663014;
  text-align: center;
  line-height: 1rem;
}
footer .right span:nth-child(2) {
  background-color: #ff6040;
  color: #fff;
  text-align: center;
  line-height: 1rem;
}
footer b {
  width: 2.68rem;
  height: 0.1rem;
  background-color: #000;
  position: absolute;
  bottom: 0.16rem;
  left: 2.6rem;
  border-radius: 0.05rem;
}
</style>